@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist:wght@100..900&display=swap");
@import "tailwindcss";
@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(240 10% 3.9%);
  --primary: hsl(220 23.8% 12.4%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: 240 5.9% 10%;
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: hsl(240 5.9% 10%);
  --radius: 0.5rem;
  --chart-1: hsl(12 76% 61%);
  --chart-2: hsl(173 58% 39%);
  --chart-3: hsl(197 37% 24%);
  --chart-4: hsl(43 74% 66%);
  --chart-5: hsl(27 87% 67%);
  --sidebar-background: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
  --sidebar: hsl(0 0% 98%);
}

.dark {
  --background: hsl(240 10% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);

  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);

  --sidebar-background: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
  --sidebar: hsl(240 5.9% 10%);
}

@theme inline {
  --font-*: initial;
  --font-geist: Geist, sans-serif;
  --font-geist-mono: GeistMono, sans-serif;

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@theme {
  --font-sans: "Geist", sans-serif;
  --font-mono: "Geist Mono", monospace;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
    font-family: var(--font-geist);
  }
}

#root {
  isolation: isolate;
}

/* Typography */
@utility h1-hero {
  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
}
@utility h2-section {
  @apply mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 text-xl font-semibold text-primary;
}
@utility h3-subsection {
  @apply mt-8 scroll-m-20 text-lg font-semibold text-primary;
}
@utility paragraph {
  @apply leading-7 not-first:mt-6;
}
@utility large {
  @apply text-lg font-semibold;
}
@utility small {
  @apply text-sm font-normal leading-none;
}
@utility muted {
  @apply text-sm text-muted-foreground;
}
@utility link {
  @apply font-medium text-primary underline underline-offset-4;
}
@utility blockquote {
  @apply mt-6 border-l-2 pl-6 italic;
}
@utility custom-list {
  @apply my-6 ml-6 list-disc [&>li]:mt-2;
}
@utility table-container {
  @apply my-6 w-full overflow-y-auto;
}
@utility table {
  @apply w-full;
}
@utility table-row {
  @apply m-0 border-t p-0 even:bg-muted;
}
@utility table-header {
  @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
}
@utility table-cell {
  @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* React-select overrides */
.react-select__control {
  @apply rounded-md border border-input bg-transparent text-base shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring;
  border-radius: var(--radius-md) !important;
}

/* Onboarding featured animation */
.onboarding-featured-animated {
  animation: cursorMove 10s ease-in-out infinite;
  transform-origin: center;
}

@keyframes cursorMove {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-220px, -50px);
  }
  20% {
    transform: translate(-250px, -50px);
  }
  30% {
    transform: translate(-200px, -50px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.onboarding-featured-secondary-animated {
  animation: cursorMoveSecondary 10s ease-in-out infinite;
  transform-origin: center;
}

@keyframes cursorMoveSecondary {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  60% {
    transform: translate(-140px, -88px);
  }
  70% {
    transform: translate(85px, -88px);
  }
}
